<template>
	<view class="table">
		<view v-for="(item,index) in messages" :key="index">
			<view class="tr">
				<view class="header">{{item.header}}</view>
				<view class="td" :class="item.direction == 'left' ?'left':'center'">{{item.td}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			messages:{
				type:Array,
				default:()=>[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table{
		.tr{
			display: flex;
			.header{
				text-align: center;
				width: 160rpx;
				border: solid 1px #969799;
				color: #787878;
			}
			.td{
				flex-grow:4;
				border: solid 1px #969799;
				text-align: center;
			}
			.left{
				border: solid 1px #969799;
				text-align: left;
			}
		}
	}
</style>
